<%@page import="youleche.com.common.MenuFactory"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>美乐车-全国最大的在线车辆信息交易平台</title>
<link href="image/meileche.jpg" rel="shortcut icon"/>
<style type="text/css">
.topNavigate {
	_position: static;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1000px;
	border-bottom: 2px solid #72b088;
	background: #ffffff;
	text-align: left;
	font: 12px/1.5 helvetica, arial, "hiragino sans gb", "\5b8b\4f53",
		sans-serif;
	color: #323232;
	clear: both;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	height: 50px;
}

.registerDiv {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
}

.registerDiv>img {
	height: 100%;
	width: 100%;
	border: 0;
}

.register {
	position: absolute;
	background-color: #fff;
	width: 800px;
	height: 400px;
	padding-top:10px;
	left: 40%;
	top: 40%;
	margin-left: -225px;
	margin-top: -100px;
}

.existAccount {
	position: relative;
	width: 410px;
	height: 70px;
	float: left;
	margin: 20px 20px 0px 20px;
}

.huo {
	position: relative;
	float: left;
	width: 410px;
	margin: 0px 20px 0px 20px;
	text-align: center;
	height: 40px;
}

.weibo_btn {
	background: url(image/ks_login.png) no-repeat;
	width: 100px;
	height: 30px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 3px;
	display: inline-block;
	margin: 0 8px;
	color: #fff;
	font-weight: bold;
}

.qq_btn {
	background: url(image/ks_login.png) no-repeat;
	width: 100px;
	height: 30px;
	padding-left: 4px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 3px;
	display: inline-block;
	color: #fff;
	font-weight: bold;
	background-position: -110px 0;
}

.otherLogin {
	position: relative;
	float: left;
	width: 390px;
	margin: 10px 20px 0px 0px;
	text-align: center;
}

.input_email {
	width: 270px;
	height: 30px;
	vertical-align: middle;
	font-size: 16px;
	color: #777;
	border: 1px solid #ccc;
	font-style: italic;
	margin: 0px 0px 5px 20px;
}

.btn_register {
	width: 248px;
	height: 36px;
	font-weight: bold;
	vertical-align: middle;
	background-color: #4490f7;
	color: #fff;
	display: inline-block;
	padding: 0 25px;
	border: none;
	border-radius: 3px;
	overflow: visible;
	font-size: 18px;
	line-height: 36px;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", \9ED1\4F53,
		\5b8b\4f53, sans-serif;
	text-align: center;
	cursor: pointer;
}

.btn_login_email {
	display: inline-block;
	height: 36px;
	padding: 0 25px;
	border: none;
	border-radius: 3px;
	overflow: visible;
	font-size: 18px;
	line-height: 36px;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", \9ED1\4F53,
		\5b8b\4f53, sans-serif;
	color: #fff;
	text-align: center;
	cursor: pointer;
	background-color: #3f9f5f;
	width: 250px;
}

.control-group {
	float: left;
	width: 350px;
	margin: 0 10px;
}

/*Tooltips*/
.tooltips_main {
	position: absolute;
	left: 0;
	margin: -5px 0 0 2px;
	z-index: 999;
}

.tooltips_box,.tooltips,.msg {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	position: relative;
	border-style: solid;
	border-color: #FF1F1F;
}

.tooltips,.msg {
	border-width: 0 1px;
	*left: -2px;
	background-color: #FFCFCF;
}

.tooltips_box {
	border-width: 1px;
	line-height: 1.5;
}

.tooltips {
	margin: 0 -2px;
}

.msg {
	margin: 1px -2px;
	padding: 0 6px;
	color: #2F2C2C;
	text-shadow: 0 1px 0 #FFFFFF;
	font-size: 12px;
}

.ov {
	background: url('image/tri.gif') no-repeat scroll 0 0 transparent;
	position: absolute;
	left: 30%;
	overflow: hidden;
	width: 15px;
	height: 15px;
	margin: 16px 0 0 0;
	display: inline;
}
/*end Tooltips*/
.txtRegistered{
	width:280px;
	height:30px;
	font-size: 18px;
	color: #777;
}
.menuDiv ul li{
	list-style: none;
	float: left;
	font-size: 18px;
	width: 80px;
	border: 2px solid #999;
	color: #5cad77;
	font-weight: bold;
	text-align: center;
	background-color: #ccc;
	border-radius: 2px;
}
.linkLogin:link{
	text-decoration: none;
}
.linkLogin:hover{
	text-decoration: underline;
}
.linkLogin{
	font-size: 12px;
	color: #444;
}
</style>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/common/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/common/jquery.cookie.js"></script>
<script type="text/javascript" src="/meileche/layer/layer.js"></script>
<script type="text/javascript">
	$(function(){
		$("#txtuserName").live("focusin", function(){
			var userName = $("#txtuserName").val();
			if(userName == "请输入登陆用户名"){
				$("#txtuserName").val('');
			}


			$("#txtuserName").css("border", "1px solid #1C86EE");
			
			var warnHmtl = "<img src=\"image/warn_icon.jpg\"/>亲美美，用户名的长度是6-18位~~~";
			$("#divuserName").html(warnHmtl);

			$("#divuserName").css("display", "block").css("color", "#1C86EE");
			
		});
		$("#txtuserName").live("focusout", function(){
			var userName = $("#txtuserName").val();
			if(userName == ""){
				$("#txtuserName").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，用户名不能为空~~~";
				$("#divuserName").html(warnHmtl);
				$("#divuserName").css("color", "#f60");

			}else if(userName.length <6 || userName.length > 18){
				$("#txtuserName").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，用户名的长度是6-12位~~~";
				$("#divuserName").html(warnHmtl);
				$("#divuserName").css("color", "#f60");

			}else{
				var warnHtmlOk = "<img src=\"image/good_icon.png\"/>";
				$("#divuserName").html(warnHtmlOk);
				$("#divuserName").css("display", "block");
				$("#txtuserName").css("border", "1px solid #ccc");
			}
		});
		
		$("#txtPass").live("focusin", function(){
			$("#txtPass").val('');
			$("#txtPass").css("border", "1px solid #1C86EE");
			
			var warnHmtl = "<img src=\"image/warn_icon.jpg\"/>亲美美，登陆密码的长度是6-18位~~~";
			$("#divpassword").html(warnHmtl);

			$("#divpassword").css("display", "block").css("color", "#1C86EE");
			$("#txtConfirmPass").css("border", "1px solid #ccc");
			$("#divconpassword").hide();
			
		});

		$("#txtPass").live("focusout", function(){
			var pass = $("#txtPass").val();
			if(pass == ""){
				$("#txtPass").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，登陆密码不能为空~~~";
				$("#divpassword").html(warnHmtl);
				$("#divpassword").css("color", "#f60");			
			}else if(pass.length <= 5 || pass.length > 18){				
				$("#txtPass").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，登陆密码的长度是6-18位~~~";
				$("#divpassword").html(warnHmtl);
				$("#divpassword").css("color", "#f60");					
			}else{
				var warnHtmlOk = "<img src=\"image/good_icon.png\"/>";
				$("#divpassword").html(warnHtmlOk);
				$("#divpassword").css("display", "block");
				$("#txtPass").css("border", "1px solid #ccc");
			}
		});
		
		
		$("#txtConfirmPass").live("focusin", function(){
			$("#txtConfirmPass").val('');
			$("#txtConfirmPass").css("border", "1px solid #1C86EE");
			
			var warnHmtl = "<img src=\"image/warn_icon.jpg\"/>亲美美，确认密码的长度是6-18位~~~";
			$("#divconpassword").html(warnHmtl);

			$("#divconpassword").css("display", "block").css("color", "#1C86EE");
			
			
		});

		$("#txtConfirmPass").live("focusout", function(){
			var pass = $("#txtConfirmPass").val();
			if(pass == ""){
				$("#txtConfirmPass").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，确认密码不能为空~~~";
				$("#divconpassword").html(warnHmtl);
				$("#divconpassword").css("color", "#f60");			
			}else if(pass.length <= 5 || pass.length > 18){
				$("#txtConfirmPass").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，确认密码的长度是6-18位~~~";
				$("#divconpassword").html(warnHmtl);
				$("#divconpassword").css("color", "#f60");		
			}else if(hidconfirmpass != hidPassword && hidconfirmpass != "" && hidPassword!= ""){
				$("#txtConfirmPass").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，两次输入的密码不一致~~~";
				$("#divconpassword").html(warnHmtl);
				$("#divconpassword").css("color", "#f60");	
			}else{
				var warnHtmlOk = "<img src=\"image/good_icon.png\"/>";
				$("#divconpassword").html(warnHtmlOk);
				$("#divconpassword").css("display", "block");
				$("#txtConfirmPass").css("border", "1px solid #ccc");
			}
		});
		
		$("#txtPhoneNum").live("focusin", function(){
			var num = $("#txtPhoneNum").val();
			if(num == "请输入手机号码"){
				$("#txtPhoneNum").val('');
			}	
			
			$("#txtPhoneNum").css("border", "1px solid #1C86EE");
			
			var warnHmtl = "<img src=\"image/warn_icon.jpg\"/>亲美美，手机号码是11位哦~~~";
			$("#divnum").html(warnHmtl);

			$("#divnum").css("display", "block").css("color", "#1C86EE");
			
		});
		$("#txtPhoneNum").live("focusout", function(){
			var num = $("#txtPhoneNum").val();
			if(num == ""){	
				$("#txtPhoneNum").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，手机号码不能为空~~~";
				$("#divnum").html(warnHmtl);
				$("#divnum").css("color", "#f60");
			}else if(num.length >11){
				$("#txtPhoneNum").css("border", "1px solid #f60");
				var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，手机号码最长是11位~~~";
				$("#divnum").html(warnHmtl);
				$("#divnum").css("color", "#f60");	
			}else{
				var warnHtmlOk = "<img src=\"image/good_icon.png\"/>";
				$("#divnum").html(warnHtmlOk);
				$("#divnum").css("display", "block");
				$("#txtPhoneNum").css("border", "1px solid #ccc");
			}
		});
		
		var args = window.location.search;
		$.ajax({
    		type: "get",
    		dataType: "json",
    		url: "u.do"+args + "&type=7",
    		success: function(v){
    			if(v== "1"){
    				$("#txtEmail").val(args.split('&')[0].split('=')[1]).attr("readonly", "readonly");
    			}else if(v=="0"){
    				window.location.href="404.jsp";
    			}
    		}
    	});
	});
	
	function act(){
		var userName = $("#txtuserName").val();
		if(userName == "请输入登陆用户名" || userName == ""){
			$("#txtuserName").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，用户名不能为空~~~";
			$("#divuserName").html(warnHmtl);
			$("#divuserName").css("color", "#f60");
			return;
		}
		if(userName.length <6 || userName > 18){
			$("#txtuserName").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，用户名的长度是6-18位~~~";
			$("#divuserName").html(warnHmtl);
			$("#divuserName").css("color", "#f60");
			return;
		}
		var pass = $("#txtPass").val();
		if(pass == "请输入登陆密码" || pass==""){
			$("#txtPass").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，登陆密码不能为空~~~";
			$("#divpassword").html(warnHmtl);
			$("#divpassword").css("color", "#f60");			
			return;
		}
		
		if(pass.length < 6  || pass.length > 18){
			$("#txtPass").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，登陆密码的长度是6-18位~~~";
			$("#divpassword").html(warnHmtl);
			$("#divpassword").css("color", "#f60");				
			return;
		}
		
		
		var conpass = $("#txtConfirmPass").val();
		if(conpass == "请输入登陆密码" || conpass==""){
			$("#txtConfirmPass").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，确认密码不能为空~~~";
			$("#divconpassword").html(warnHmtl);
			$("#divconpassword").css("color", "#f60");	
			return;
		}
		
		if(conpass.length < 6  || conpass.length > 18){
			$("#txtConfirmPass").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，确认密码的长度是6-18位~~~";
			$("#divconpassword").html(warnHmtl);
			$("#divconpassword").css("color", "#f60");	
			return;
		}
		
		if(conpass != pass && conpass != "" && pass != ""){
			$("#txtConfirmPass").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，两次输入的密码不一致~~~";
			$("#divconpassword").html(warnHmtl);
			$("#divconpassword").css("color", "#f60");	
			return;
		}
		
		var num = $("#txtPhoneNum").val();
		if(num == "请输入手机号码" || num ==""){
			$("#txtPhoneNum").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，手机号码不能为空~~~";
			$("#divnum").html(warnHmtl);
			$("#divnum").css("color", "#f60");
			return;
		}
		
		if(num.length > 11){
			$("#txtPhoneNum").css("border", "1px solid #f60");
			var warnHmtl = "<img src=\"image/verror.png\"/>亲美美，手机号码最长是11位~~~";
			$("#divnum").html(warnHmtl);
			$("#divnum").css("color", "#f60");	
			return;
		}
		
		var user = new Object();
		user.userName = userName;
		user.userPassword=pass;
		user.email = $("#txtEmail").val();
		user.phoneNum = num;
		var json = JSON.stringify(user);
		
		$.ajax({
    		type: "post",
    		dataType: "json",
			contentType : "application/json",
    		data: json,
    		url: "u.do?type=8",
    		success: function(v){
    			if(v == "1"){
    				window.location.href="user/index.jsp";
    			}
    		}
    	}); 
	}
</script>
</head>
<body>

	<div class="topNavigate">
		<div 
			style="margin-left: auto; margin-right: auto; width: 1000px; height: 50px;">
			<div style="float: left; width: 250px; height: 50px;">
				<img src="image/ylc_logo_small.jpg" />
			</div>
			<div class="menuDiv"
				style="float: left; width: 600px; height: 50px;">
				<%= MenuFactory.getTopMenu() %>				
				</div>
			<div
				style="width: 150px; height: 350px; float: left; color: #444; font-size: 18px;"
				align="right">
				<a href="register.jsp" class="linkLogin">注册</a>&nbsp;&nbsp;<span style="color:#ccc;font-size:12px;">|</span>&nbsp;&nbsp;<a style="color:#444;font-size:12px;">帮助</a>
			</div>
		</div>
	</div>
	<div class="registerDiv">
		<div class="register" style="display:block;">
				<div style="float:left; width: 800px;text-align:center; color: #636363; height:30px;vertical-align: middle;margin-bottom:10px;">
				<img src="image/mlc_act.jpg"/>
				</div> 
				<div style="float:left;margin: 10px 0px 0px 10px; width: 440px; color: #636363; text-align: center; line-height: 40px;">
								&nbsp;&nbsp;&nbsp;&nbsp;邮箱:<input type="text"  id="txtEmail"
									class="input_email"/>
				</div> 
				<div
					style="float:left;margin: 10px 0px 0px 10px;text-align: center; width: 440px; color: #636363;line-height: 40px;">
					&nbsp;&nbsp;用户名:<input id="txtuserName" type="text" value="请输入登陆用户名"
								 onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" class="input_email"/>
					
				</div>
				<div
				 id="divuserName"	style="float:left; width: 340px;padding-top:10px; color: #636363; text-align: left;height:30px;margin-top:10px;vertical-align:text-bottom;">
					
				</div>
				<div
					style="float:left;margin: 10px 0px 0px 10px;text-align: center; width: 440px; color: #636363;line-height: 40px;">
					登陆密码:<input id="txtPass" type="password"  onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" 
								class="input_email" placeholder="请输入登陆密码"/>
					
				</div>
				<div id="divpassword"
					style="float:left; padding-top:10px;width: 340px; color: #636363; text-align: left;height:30px;margin-top:10px;vertical-align:text-bottom;">
					
				</div>
				<div
					style="float:left;margin: 10px 0px 0px 10px;text-align: center; width: 440px; color: #636363;line-height: 40px;">
					确认密码:<input id="txtConfirmPass" type="password" placeholder="请确认密码"
								 onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" class="input_email"/>
					
				</div>
				<div id="divconpassword"
					style="float:left; width: 340px; color: #636363; text-align: left;height:30px;margin-top:10px;vertical-align:text-bottom;">
					
				</div>
				<div
					style="float:left;margin: 10px 0px 0px 10px;text-align: center; width: 440px; color: #636363;line-height: 40px;">
					手机号码:<input id="txtPhoneNum" type="text" value="请输入手机号码"
								class="input_email" onkeyup="value=value.replace(/[^\d]/g,'')" />
					
				</div>
				<div id="divnum"
					style="float:left; width: 340px;padding-top:10px; color: #636363; text-align: left;height:30px;margin-top:10px;vertical-align:text-bottom;">
					
				</div>
				<div
					style="float:left;margin: 30px 20px 0px 20px;width: 410px; color: #636363; text-align: center;">
					<input type="button" value="立即激活" class="btn_register"
						onclick="act();" />
				</div>
				<div
					style="float:left; height:20px;width: 340px; padding-top:60px;color: #5cad77; font-size:14px;text-align: right;">
					2013-2014  @ meileche
				</div>
		</div>
		
		<img src="image/123.jpg" />
	</div>
</body>
</html>
